<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mask遮罩属性</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="mask-image">
        <img src="../images/ps1.jpg" alt="原图" width="100%" height="100%">
    </div>
    <div class="mask-image-svg">
        <img src="../images/ps1.jpg" alt="原图" width="100%" height="100%" />
    </div>
    <svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <mask id='mask' maskContentUnits="objectBoundingBox">
            <ellipse cx="25" cy="25" rx="20" ry="10" fill="#000000" stroke="none"></ellipse>
            <rect x="15" y="5" width="20" height="40" rx="5" ry="5" fill="#000000" stroke="none"></rect>
        </mask>
    </svg>
    <div class="mask-image-maskxml">
        <img src="../images/ps1.jpg" alt="原图" width="100%" height="100%" />
    </div>
</body>
</html>